<template>
  <div class="main">
    <div :class="['main__info', this.resInfoBool && 'main__info_active']">
      <div style="width: 95%; margin: auto;padding: 30px;">
        <p class="info-title" style="margin-top: 20px;">Компетенция: {{ resInfo.name }}</p>
        <p class="info-title">Ценность: {{ resInfo.parent }}</p>

        <div class="rec70" style="margin-top: 20px;">
          <p class="rec70-title">Рекомендации, на которые необходимо уделить 70% внимания:</p>
          <template v-for="item in resInfo.recommendations70" :key="item">
            <p class="rec-text">{{ item }}</p>
          </template>
        </div>
        <div class="rec70"  style="margin-top: 20px;">
          <p class="rec70-title">Рекомендации, которым необходимо уделить 20% внимания:</p>
          <template v-for="item in resInfo.recommendations20" :key="item">
            <p class="rec-text">{{ item }}</p>
          </template>
        </div>

        <p class="rec70-title" style="width: 80%;margin: auto;margin-top: 15px;margin-top: 30px;">Рекомендации, которым следует уделить
          10%
          внимания:</p>
        <div class="three">
          <div style="width: 25%;">
            <p class="three-title">Обучение:</p>
            <template v-for="item in resInfo.recommendations10.training" :key="item">
              <p class="three-text">{{ item }}</p>
            </template>
          </div>
          <div style="padding-left: 10px; padding-right: 10px; width: 50%">
            <p class="three-title" >Книги:</p>
            <template v-for="item in resInfo.recommendations10.books" :key="item">
              <p class="three-text">{{ item }}</p>
            </template>
          </div>
          <div style="width: 25%;">
            <p class="three-title">Фильмы:</p>
            <template v-for="item in resInfo.recommendations10.films" :key="item">
              <p class="three-text">{{ item }}</p>
            </template>
          </div>
        </div>
        <button @click="boolInfo" style="background-color: rgba(138,77,15, .8);" class="button-about">Закрыть</button>
      </div>
    </div>
    <div>
      <h1 class="title__text">Компетенции для развития</h1>
      <template v-for="item in recommendations" :key="item.id">
        <ControllerVue :name="item.name" :colorRange="item.color" :parent="item.parent" :id="item.id" :func="draw" />
      </template>
      <button @click="twist()" :disabled="this.click && 'isDisabled'"
        :class="['button', this.click && 'block__button_type_save']">
        {{ this.click ? 'Выбор...' : 'Получить рекомендацию'
        }}</button>
    </div>
    <div class="canvas-block">
      <canvas id="canvasnew" :width="canvas.width + 'px'" :height="canvas.height + 'px'" class="canvasnew"></canvas>
      <img :src="arrow" alt="Стрелка" class="canvas-arrow">
    </div>
  </div>
  <div class="result">
    <div class="result__info">
      <template v-if="this.result !== 'Результат точно не определён' && this.result !== ''">
        <p>Рекомендовано к изучению: <span style="font-weight: bold;"> {{ result }}</span></p>
        <button @click="getInfoResult(this.result)" class="button-about">Подробнее</button>
      </template>

      <template v-if="this.result === 'Результат точно не определён'">
        <p>{{ this.result }}, повторите попытку</p>
      </template>
    </div>
    <div class="result__history">
      <template v-if="historyList.length > 0">
        <p style="font-weight: bold;">Список полученных рекомендаций:</p>
        <template v-for="(item, index) in historyList" :key="index">
          <div class="list-item">
            <p><span>{{ historyList.length - index }}. </span>{{ item }}</p>
            <button @click="getInfoResult(item)" class="result__button">Читать больше</button>
          </div>
        </template>
      </template>
    </div>
  </div>
  <svg>
    <filter id="wavy2">
      <feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="20" />
    </filter>
  </svg>
</template>

<script>

import ControllerVue from '../components/ControllerVue.vue'
import { recommendations } from '../data/recommendations.js';
import { allInfo } from '@/data/allData';

import { useStore } from '@/state/stateStore';

import arrow from '@/img/arrow.png'

export default {
  name: 'WheelRandom',
  components: {
    ControllerVue,
  },
  mounted() {
    this.draw();
  },
  methods: {
    boolInfo() {
      this.resInfoBool = !this.resInfoBool;
    },

    draw() {
      const state = useStore();
      const circle = {
        "centerX": Math.ceil(this.canvas.height / 2),
        "centerY": Math.ceil(this.canvas.width / 2),
        "radius": Math.ceil(this.canvas.width / 2 - 5),
        "border": 3,
      }

      const canvasnew = document.getElementById('canvasnew');
      const ctxNew = canvasnew.getContext('2d');
      ctxNew.clearRect(0, 0, this.canvas.width, this.canvas.height);

      for (let i = 1; i <= 16; i++) {
        let startPoint = 0;
        let endPoint = 0;
        for (let j = 1; j < i; j++) {
          startPoint = startPoint + state['one' + j];
        }
        endPoint = (startPoint + state['one' + i]);

        startPoint = startPoint * 100 / state.sum;
        endPoint = endPoint * 100 / state.sum;

        ctxNew.beginPath();
        ctxNew.lineWidth = circle.border;
        ctxNew.strokeStyle = 'white';
        ctxNew.moveTo(circle.centerX, circle.centerY);
        ctxNew.arc(circle.centerX, circle.centerY, circle.radius, startPoint * 3.6 * Math.PI / 180, endPoint * 3.6 * Math.PI / 180, false);
        ctxNew.lineTo(circle.centerX, circle.centerY);
        ctxNew.fillStyle = recommendations[i - 1].color;
        ctxNew.fill();
        ctxNew.stroke();
      }

      /*const canvas = document.querySelector('.canvasnew')
         const ctx = canvas.getContext('2d');
        ctx.fillRect(this.canvas.width - 9, Math.ceil(this.canvas.height / 2), 1, 1);*/
    },

    twist() {
      this.click = true;
      function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
      }

      let start = this.rotate
      let finish = start + getRandomArbitrary(3000, 5000);
      this.rotate = finish;

      document.getElementById("canvasnew").animate(
        [
          { transform: 'rotate(' + start + 'deg)' },
          { transform: 'rotate(' + finish + 'deg)' },
        ],
        {
          duration: 10000,
          easing: "cubic-bezier(.64,-0.32,.58,1.62)",
          fill: "both",
        },
      );

      setTimeout(() => {
        const result = this.checkResult()
        this.result = result;
        if (result !== 'Результат точно не определён') {
          //this.resInfo = allInfo.find(item => item.name == this.result);
          this.historyList.unshift(result)
        }

        this.click = false;

      }, 10000);
    },

    getRGBcanvas(x, y) {
      const canvas = document.querySelector('.canvasnew')
      const ctx = canvas.getContext('2d');
      let ctxGet = ctx.getImageData(x, y, 1, 1);
      let red = ctxGet.data[0];
      let green = ctxGet.data[1];
      let blue = ctxGet.data[2];
      //let alpha = ctxGet.data[3];
      return red + "," + green + "," + blue;
    },

    checkResult() {
      let startPoint = Number(this.canvas.width) / 2 - 44; // исходная точка
      // первый 0 процент от нуля
      let xres = startPoint * Math.cos(((0 * 3.6) - ((this.rotate - Math.floor(this.rotate / 360, 0) * 360))) * Math.PI / 180) + this.canvas.width / 2;
      let yres = startPoint * Math.sin(((0 * 3.6) - ((this.rotate - Math.floor(this.rotate / 360, 0) * 360))) * Math.PI / 180) + this.canvas.width / 2;

      const colorPoint = this.getRGBcanvas(xres, yres)

      let res = recommendations.find(item => item.color.includes(colorPoint));

      try {
        return res.name
      } catch {
        return 'Результат точно не определён'
      }
      /*const canvas = document.querySelector('.canvasnew')
      const ctx = canvas.getContext('2d');
      ctx.strokeStyle = 'black';
      ctx.fillRect(xres, yres, 1, 1);*/
    },

    getInfoResult(result) {
      this.resInfo = allInfo.find(item => item.name == result);
      this.boolInfo();
    }
  },
  data() {
    let click = false;
    let resInfoBool = false;
    return {
      click, resInfoBool
    }
  },
  setup() {

    const canvas = {
      width: 501,
      height: 501,
    }

    const historyList = [];
    //const historyList = ['f', 'd', 'sd'];

    const resInfo = //allInfo[15]
    {
      id: 1,
      name: '',
      parent: '',
      recommendations70: [
        ''
      ],
      recommendations20: [
        ''
      ],
      recommendations10: {
        training: [''],
        books: [''],
        films: [
          '']
      }
    }
    /*{
      id: 15,
      name: 'Командная работа',
      parent: 'Открытость и сотрудничество',
      recommendations70: ['Анализируйте особенности работы команды и взаимодействия с окружающими, проявление готовности к изменениям и открытости: Какую роль Вы занимаете в команде? Насколько эффективно? Какой роли не хватает для эффективной работы команды? С какими членами команды Вам комфортнее взаимодействовать? С какими нет? Почему? Какие сложности бывают во взаимодействии с окружающими? Как Вы воспринимаете изменения? Как изменения оказывают влияние на Ваше поведении/ деятельность? и прочие. Определяйте пути повышения эффективности своей работы в команде, повышение открытости/ адаптивности и взаимодействия.',
        'Оценивайте проявление командности в ваших действиях. Делайте выводы и повышайте эффективность.',
        'Изучите литературу на предмет того, какие классификации командных ролей существуют. Проанализируйте команду, в которой Вы работаете. Если Вы обнаружили, что в Вашей команде есть дисбаланс, оцените, что вы можете с этим сделать? Примените рекомендации из прочитанной литературы. ',
        'Попробуйте самостоятельно определить свою роль в команде, проанализировав следующие вопросы: 1) Какой вклад я вношу (вижу новые возможности, сплачиваю команду, поощряю других высказываться, выступаю фасилитатором процесса обсуждения, довожу обсуждение до конца, возвращаю команду к теме обсуждения и работе над задачей); 2) Характерный для меня подход в командной работе (я стараюсь лучше узнать людей, с которыми работаю, я вношу вклад, когда уверен в своих знаниях по вопросу, ставлю под сомнение точки зрения коллег, воплощаю идею в план действий); 3) Я получаю удовольствие от работы в команде, когда (анализирую ситуацию, нахожу практические решения проблем, устанавливаю хорошие отношения, влияю на решения других, знакомлюсь с новыми людьми, нахожу нестандартные подходы, использую свои профессиональные знания и опыт); 4) Сверьте Ваше описание с описанием ролей в команде, содержащимся в литературе. Для этих целей вы, например, можете использовать книгу М.Белбина и заполнить содержащийся в ней опросник по диагностике командных ролей.',
        'Если вы чувствуйте напряжение/ недопонимание в коллективе, обсудите сложившуюся ситуацию с коллегами. Выявите причину и устраните, продумайте меры по профилактике возникновения аналогичных проблем. ',
        'Оказывайте помощь коллегам при выполнении общих задач',
        'Поддерживайте культуру обязательности и выполнения обещаний в команде. Выполняйте свои обещания. Поощряйте обязательность. Обсудите в команде/проведите совещание на тему  «Каким образом можно повысить обязательность участников команды». Следуйте принятым правилам."',
      ],
      recommendations20: ['Запрашивайте обратную связь сотрудников/ руководителей/ коллег/ о вашей работе в команде (нацеленности на помощь и внимательности к мнению членов команды).',
        'Определяйте коллег/ руководителей, которые, по Вашему мнению, умеют управлять конфликтами, всегда проявляют взаимоуважение к другим и открытость изменениям, демонстрируют командную работу. Обсуждайте с ними пути повышения своей эффективности по этим направлениям.',
        'Попросите руководителя дать оценку вашей работе в команде – насколько Вы ответственный член команды, насколько ценный вклад вы вносите в работе, эффективно ли вы решаете/ реагируете на конфликты.',
        'Проанализируйте то, каким образом окружающие Вас люди могут понять, что Вы цените их работу, уважаете их как профессионалов. Действительно ли Ваше отношение может быть понятно другому человеку? Как Вы можете это продемонстрировать? Выберите одного или двух коллег и в течение следующей недели попытайтесь выразить им ваше уважение."',
      ],
      recommendations10: {
        training: ['Вебинар "Клиентоориентированность"',
          'Тренинг "Эффективные коммуникации"',
          'Тренинг "Основы межфункционального взаимодействия"',
        ],
        books: ['Гертер Г., Оттл К. «Работа в команде. Практические рекомендации для успеха в группе»',
          'Джон Максвелл «17 неопровержимых законов работы в команде»',
          'Патрик Ленсиони «5 пороков команды»',
          'Мак-Карти Дж. и М. «Программируем командный дух»',
          'Поташев М.,Ершов П."Правила команды: Искусство думать вместе"',
        ],
        films: ['Легенда № 17, 2012',
          'Движение вверх, 2017',
          'Огонь, 2020',
          'Дело храбрых, ',
          'Одиннадцать друзей Оушена, 2001"',
        ],
      },
    }*/

    return {
      recommendations, allInfo, canvas, arrow, rotate: 0, result: '', resInfo, historyList
    }
  }
}

</script>

<style scoped>
.main {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  padding-top: 20px;
}

.main__info {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: max-content;
  z-index: -10;
  opacity: 0;
}

.info-title {
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 25px;
  margin-top: 10px;
}

.main__info_active {
  min-height: 100vh;
  z-index: 5;
  opacity: 1;
  background-color: white;
}

.main__info::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 80px;
  box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
  filter: url(#wavy2);
}

.title__text {
  margin: 0 auto 15px;
  padding: 0;
  font-size: 23px;
}

.rec70 {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 95%;
  margin: auto;
}

.rec70-title {
  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: 18px;
  padding-bottom: 10px;
  margin-top: 20px;
}

.rec-text {
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 20px;
  text-indent: 25px;
}

.button {
  margin-top: 15px;
  position: relative;
  display: inline-block;
  background-color: #0080c8;
  border: none;
  height: auto;
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  white-space: normal;
  padding: 13px 25px;
  border-radius: 61px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  box-shadow: none;
  color: #fff;
  text-transform: uppercase;
  transition-property: background-color;
  transition-duration: 1s;
  width: 250px;
}

.button:hover {
  opacity: 0.9;
}

.block__button_type_save {
  background-color: #FF9C00;
}

.canvas-block {
  position: relative;
  width: 501px;
  height: 501px;
  overflow: hidden;
}

.canvasnew {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.canvas-arrow {
  position: absolute;
  right: 0;
  top: 240.5px;
}

.three {
  display: flex;
  width: 95%;
  margin: auto;
  padding-bottom: 20px;
  justify-content: center;
}

.three-title {
  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
  padding-bottom: 10px;
}

.three-text {
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 16px;
}

.button-about {
  position: relative;
  display: inline-block;
  background-color: #64b0d9;
  border: none;
  height: auto;
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  white-space: normal;
  padding: 13px 25px;
  border-radius: 61px;
  cursor: pointer;
  transition: all .2s ease-in-out;
  box-shadow: none;
  color: #fff;
  text-transform: uppercase;
  transition-property: background-color;
  transition-duration: 1s;
  width: 150px;
}

.button-about:hover {
  opacity: 0.9;
}

.result {
  display: flex;
  width: 84%;
  margin: auto;
  margin-top: 40px;
}

.result__info {
  width: 50%;
}

.result__history {
  width: 50%;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.result__button {
  margin-left: 15px;
  background-color: #64b0d9;
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 15px;
}

.result__button:hover {
  opacity: .9;
}
</style>
